<!DOCTYPE html>
<html>

<head>
<title>Webcam in Cindy JS</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../build/js/Cindy.js"></script>
<script id="csinit" type="text/x-cindyscript">
video = camera video(resolution -> [320,16/9]);
</script>
<script id="csdraw" type="text/x-cindyscript">
if (image ready(video),
  errc(image size(video));
  draw image (A, B, video);
);
</script>
<script type="text/javascript">
var cdy = CindyJS({
  ports: [{id: "CSCanvas", transform:[{visibleRect:[-0.1,30.1,40.1,-0.1]}]}],
  scripts: "cs*",
  language: "en",
  defaultAppearance: {
  },
  geometry: [
    {name:"A", type:"Free", pos:[0,0]},
    {name:"B", type:"Free", pos:[40,0]}
  ]
});
</script>
</head>

<body style="font-family:Arial;">
  <div id="CSCanvas" style="width:804px; height:604px; border:2px solid black"></div>
  <p>
    Note if running from a local machine Chromium/Chrome are preventing camera access due to security concerns.<br>
    You can work around this by launching
    <code>./node_modules/.bin/st -l -nc</code>
    and then visiting
    <a href="http://127.0.0.1:1337/examples/webcam1.html">http://127.0.0.1:1337/examples/webcam1.html</a>.<br>
    Alternatively, you can also run Chrome with the <code>--allow-file-access-from-files</code> flag.<br>
    This shouldn't be necessary if the example runs on a webserver.
  </p>
</body>

</html>
